import React, { memo, useState, useEffect } from "react";
import "./Show.css";
import { connect } from "react-redux";
import Scroll from "../../baseUI/scroll/index";
import { forceCheck } from "react-lazyload";

import * as api from "@/api";
import * as actionTypes from "./store/actionCreators";

import { Page,PageTitle } from "../../assets/global-style";

import Recommend from "../../components/show/recommend/index";
import TopJumper from "../../baseUI/toUp/toUp"

const Show = (props) => {
  let [recommend, setRecommend] = useState([]);
  
  let [page, setPage] = useState(1);

  const [menuDisplay, setMenuDisplay] = useState(0)

  const fetchRecommend = () => {
    api.reqrecommend(page).then((res) => {
      setRecommend(
        [...recommend,
           ...res.data.data.list]
        );
    });
  };

  useEffect(() => {
    fetchRecommend();
  }, [page]);

  // 上拉加载
  const handlePullUp = () => {
    console.log("上拉刷新");
    setPage(++page);
  };
  // 下拉刷新
  const handlePullDown = () => {
    console.log("下拉刷新");
  };

  const handleOnclick = () => {
    setServerDisplay(!serverDisplay);
  };
  const [serverDisplay, setServerDisplay] = useState(false);

  return (
    <Page>
      <PageTitle>演出</PageTitle>
      <Scroll
        direction={"vertical"}
        refresh={false}
        pullUp={handlePullUp}
        pullDown={handlePullDown}
        onScroll={(e) => {
          if (e.y < -1142) {
            setMenuDisplay(1);
          } else {
            setMenuDisplay(0);
          }
          forceCheck();
        }}
      >
        <div>
          <Recommend  recommend={recommend}/>
        </div>
      </Scroll>
    </Page>
  );
};

const mapStateToDispatch = (dispatch) => {
  return {
    getShowDataDispatch() {
      dispatch(actionTypes.getShowData());
    },
  };
};

const mapStateToProps = (state) => {
  return {
    showstate: state.show.showdata,
  };
};
export default connect(mapStateToProps, mapStateToDispatch)(memo(Show))